<template>
  <!-- 模板部分保持不变 -->
  <dv-border-box-12 class="NurseInformationBox">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span><i class="iconfont icon-shuju7" /></span>
        <div class="d-flex">
          <span class="fs-xl text mx-2" style="font-size:16px">{{title}}</span>
          <span
            style="
              font-size: 16px;
              display: inline-block;
              margin-left:50px;"
            >{{ randomNumber }}</span
          >
        </div>
      </div>
      <div class="d-flex mt-1 jc-center body-box">
        <dv-scroll-board
          style="font-weight:600"
          class="dv-scr-board"
          :config="config"
          :style="{ cursor: 'pointer' }"
          @click="(event) => handleCellClick(event.rowIndex, event.columnIndex)"
        />
      </div>
    </div>
  </dv-border-box-12>
  <dv-border-box-12
    v-if="dialogVisible"
    class="modal-overlay"
    @click="dialogVisible = false"
  >
    <div class="modal-content" @click.stop>
      <div class="d-flex pt-2 pl-2">
        <div class="d-flex">
          <span><i class="iconfont icon-align-left"></i></span>
          <span class="mx-2">护理人员信息详情</span>
          <span
            class="close-icon"
            @click="handleDialogClose"
            style="
              position: absolute;
              top: 16px;
              right: 10px;
              cursor: pointer;
              font-size: 30px;
              font-weight: 600;
            "
            >×</span
          >
        </div>
      </div>
      <div class="body-box">
        <div class="info-item">
          <span>姓名:</span>
          <span>{{dialogMessage}}</span>
        </div>
        <div class="info-item">
          <span>职工号:</span>
          <span>7270</span>
        </div>
        <div class="info-item">
          <span>性别:</span>
          <span>女</span>
        </div>
        <div class="info-item">
          <span>出生日期:</span>
          <span>1990-06-19</span>
        </div>
        <div class="info-item">
          <span>参加工作时间:</span>
          <span>2009-07-01</span>
        </div>
        <div class="info-item">
          <span>最高学历/毕业院校:</span>
          <span>大学本科/上海交通大学医学院</span>
        </div>
        <div class="info-item">
          <span>基础学历/毕业学校:</span>
          <span>中专/交通大学附属卫生学校</span>
        </div>
        <div class="info-item">
          <span>证书/取得时间:</span>
          <span>中医适任证/2020.10.18</span>
        </div>
      </div>
    </div>
  </dv-border-box-12>
</template>
<script>
// 脚本部分保持不变
import { defineComponent, reactive, ref } from "vue";
// 随机姓名数组
const randomNames = [
  "张三",
  "李四",
  "王五",
  "赵六",
  "孙七",
  "周八",
  "吴九",
  "郑十",
];
export default defineComponent({
  props: {
    title: {
      type: String,
      default: "",
    },
    randomNumber: {
      type: String,
      default: "",
    },
  },
  setup() {
    const data = [];
    // 生成数据
    for (let i = 1; i <= 8; i++) {
      const randomIndex1 = Math.floor(Math.random() * randomNames.length);
      const randomName1 = randomNames[randomIndex1];
      const item1 = `${randomName1}(${i}级)`;
      const randomIndex2 = Math.floor(Math.random() * randomNames.length);
      const randomName2 = randomNames[randomIndex2];
      const item2 = `${randomName2}(${i}级)`;
      data.push([item1, item2]);//item3
    }

    const config = reactive({
      data,
      rowNum: 5, //表格行数
      headerBGC: "#0f1325", //表头
      oddRowBGC: "#0f1325", //奇数行
      evenRowBGC: "#171c33", //偶数行
      index: false,
      columnWidth: [110,110],
      align: ["center"],
    });

    // 控制模态框显示隐藏
    const dialogVisible = ref(false);
    // // 模态框显示的信息
    const dialogMessage = ref("");
    const handleCellClick = (rowIndex, columnIndex) => {
      if (rowIndex !== undefined && columnIndex !== undefined) 
      {
        const clickedData = config.data[rowIndex][columnIndex];
        // 设置模态框显示的信息
        dialogMessage.value = `姓名：${clickedData}`;
        // 显示模态框
        dialogVisible.value = true;
      }
    };
    const handleDialogClose = () => {
      // 关闭模态框
      dialogVisible.value = false;
    };
    return {
      config,
      handleCellClick,
      dialogVisible,
      dialogMessage,
      handleDialogClose,
    };
  },
});
</script>

<style lang="scss" scoped>
$box-height: 100%;
$box-width: 100%;
.NurseInformationBox {
  padding: 6px;
  height: $box-height;
  width: $box-width;
  .bg-color-black {
    border-radius: 10px;
  }
  .body-box {
    overflow: hidden;
    .dv-scr-board {
      width: 100%;
      height:266px;
    }
    border-radius: 10px;
  }
}
.modal-overlay {
  border-radius: 10px;
  z-index: 9999;
  position: fixed;
  margin: 0 auto;
  padding: 5px;
  top: 30%;
  left: 31%;
  width: 40%;
  height: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #141e30;
  box-sizing: border-box;
  /* 模态框的内容部分 */
  .modal-content {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    .d-flex {
      width: 100%;
      margin-top: 5px;
      border-radius: 10px;
      height: 10%;
      .close-icon {
        color: #909399;
      }
      .close-icon:hover {
        color: #606266;
      }
    }
    .body-box {
      width: 99%;
      height: 88.5% !important;
      margin: 0 auto;
      .info-item {
        width: 80%;
        height: 10%;
        font-size:20px;
        margin: 0 auto;
      }
      .info-item:not(:first-child) 
      {
        margin-top: 11px;
      }
      .info-item span
      {
        display: inline-block;
        text-align:left;

      }
      .info-item span:first-child {
        font-weight: bold;
      }
     .info-item span
     {
       display:inline-block;
       width:50%;
     }

    }
  }
}
</style>